<template>
  <div class="maxBox">
    <ul>
      <header :style="{ backgroundColor: $store.state.color }">
        <p>未完成</p>
        <p>></p>
      </header>
      <template v-for="(v, i) in $store.state.objList">
        <!-- 给 template 循环 kei 给子上面加  -->
        <li v-if="v.check == 0" :key="i">
          <input
            @click="$store.commit('changestate', { value: 1, id: v.id })"
            type="checkbox"
            name=""
            id=""
          />
          <p>{{ v.name }}</p>
          <button @click="$store.commit('changestate', { value: 2, id: v.id })">
            取消
          </button>
        </li>
      </template>
    </ul>
    <ul>
      <header :style="{ backgroundColor: $store.state.color }">
        <p>已完成</p>
        <p>></p>
      </header>
      <template v-for="(v, i) in $store.state.objList">
        <!-- 给 template 循环 kei 给子上面加  -->
        <li v-if="v.check == 1" :key="i">
          <input
            @click="$store.commit('changestate', { value: 0, id: v.id })"
            type="checkbox"
            name=""
            id=""
          />
          <p>{{ v.name }}</p>
          <p class="right">{{ v.date }}</p>
        </li>
      </template>
    </ul>
    <ul>
      <header :style="{ backgroundColor: $store.state.color }">
        <p>取消</p>
        <p>></p>
      </header>
      <template v-for="(v, i) in $store.state.objList">
        <!-- 给 template 循环 kei 给子上面加  -->
        <li v-if="v.check == 2" :key="i">
          <s> {{ v.name }}</s>
          <button @click="$store.commit('changestate', { value: 1, id: v.id })">
            恢复
          </button>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props, { emit }) {
    return {};
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.maxBox {
  width: 100%;
  ul {
    header {
      width: 100%;
      height: 40px;
      background-color: pink;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        color: #fff;
        margin: 0 20px;
      }
    }
    li {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #000;
      display: flex;
      align-items: center;
      position: relative;
      button,
      .right {
        position: absolute;
        right: 20px;
      }
    }
  }
}
</style>
